<template>
    <div>
        <!-- 搜索表单区域的组件逻辑 -->
        <div class="search-form">
            <el-form inline>
                <template v-for="(item, index) in columns">
                    <el-form-item :key="index" :label="item.title"
                        v-if="(item.showSearch || item.showSearch == undefined) && item.type != 'action'">
                        <template v-if="item.type == 'input' || item.type == undefined">
                            <el-input :name="item.id" size="small" :placeholder="item.placeholder"  v-model="params[item.key]"/>
                        </template>
                        <template v-if="item.type == 'time'">
                            <el-date-picker v-model="params[item.key]" :placeholder="item.placeholder" size="small" type="date"></el-date-picker>
                        </template>
                        <template v-if="item.type == 'tree'">
                            <el-cascader size="small" v-model="params[item.key]" :options="item.values"></el-cascader>
                        </template>
                        <template v-if="item.type == 'select'">
                            <el-select :placeholder="item.placeholder" v-model="params[item.key]" size="small">
                                <el-option value="">请选择</el-option>
                                <el-option v-for="(it, ind) in item.values" :key="ind" :value="it.value">{{ it.label
                                }}</el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                </template>

                <el-form-item>
                    <el-button size="small" icon="el-icon-search" type="danger" @click="getList(params)">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 工具栏 -->
        <div class="toolbar">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="initForm();addShow = true">添加</el-button>
        </div>
        <!-- 表格区域 -->
        <el-table :data="list" :border="true">
            <template v-for="(item, index) in columns">
                <el-table-column v-if="(item.showTable || item.showTable == undefined) && (item.isSlot)" :key="index"
                    :label="item.title">
                    <template slot-scope="scope">
                        <template v-if="item.type == 'action'">
                            <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="delList">删除</el-button>
                        </template>
                        <slot :name="item.slot_name" :row="scope.row"></slot>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="(item.showTable || item.showTable == undefined) && (!item.isSlot || item.isSlot == undefined)"
                    :key="index" :label="item.title" :prop="item.key"></el-table-column>
            </template>
        </el-table>
        <!-- 分页区域 -->
        <div class="page">
            <el-pagination layout="total,prev,pager,next,jumper" :total="total" page-size="5"></el-pagination>
        </div>

        <!-- 添加或者编辑的操作方法 -->
        <el-dialog title="添加" :visible.sync="addShow">
            <el-form label-width="120px">
                <template v-for="(item, index) in columns">
                    <el-form-item :key="index" :label="item.title"
                        v-if="(item.showForm || item.showForm == undefined) && item.type != 'action'">
                        <template v-if="item.type == 'input' || item.type == undefined">
                            <el-input :name="item.id" size="small" v-model="formData[item.key]"
                                :placeholder="item.placeholder" />
                        </template>
                        <template v-if="item.type == 'time'">
                            <el-date-picker :placeholder="item.placeholder" v-model="formData[item.key]" size="small"
                                type="datetime"></el-date-picker>
                        </template>
                        <template v-if="item.type == 'upload'">
                            <el-upload class="avatar-uploader">
                                <img v-if="formData[item.key]" :src="formData[item.key]" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </template>
                        <template v-if="item.type == 'tree'">
                            <el-cascader size="small" v-model="formData[item.key]" :options="item.values"></el-cascader>
                        </template>
                        <template v-if="item.type == 'select'">
                            <el-select :placeholder="item.placeholder" v-model="formData[item.key]" size="small">
                                <el-option value="">请选择</el-option>
                                <el-option v-for="(it, ind) in item.values" :key="ind" :value="it.value">{{ it.label
                                }}</el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                </template>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addShow = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改" :visible.sync="editShow">
            <el-form label-width="120px">
                <template v-for="(item, index) in columns">
                    <el-form-item :key="index" :label="item.title"
                        v-if="(item.showForm || item.showForm == undefined) && item.type != 'action'">
                        <template v-if="item.type == 'input' || item.type == undefined">
                            <el-input :name="item.id" size="small" v-model="formData[item.key]"
                                :placeholder="item.placeholder" />
                        </template>
                        <template v-if="item.type == 'time'">
                            <el-date-picker :placeholder="item.placeholder" v-model="formData[item.key]" size="small"
                                type="datetime"></el-date-picker>
                        </template>
                        <template v-if="item.type == 'upload'">
                            <el-upload class="avatar-uploader">
                                <img v-if="formData[item.key]" :src="formData[item.key]" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </template>
                        <template v-if="item.type == 'tree'">
                            <el-cascader size="small" v-model="formData[item.key]" :options="item.values"></el-cascader>
                        </template>
                        <template v-if="item.type == 'select'">
                            <el-select :placeholder="item.placeholder" v-model="formData[item.key]" size="small">
                                <el-option value="">请选择</el-option>
                                <el-option v-for="(it, ind) in item.values" :key="ind" :value="it.value">{{ it.label
                                }}</el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                </template>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editShow = false">取 消</el-button>
                <el-button type="primary" @click="doEdit">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import curd from '@/mixins/curd';
export default {
    name: "ProTable",
    mixins: [curd],
    props: {
        url: {
            type: String,
        },
        columns: {
            type: Array,
            default: [],
        },
    },
    data() {
        return {
            addShow: false,
            editShow: false,
            imageUrl: "",
            formData: {},
            params:{}
        }
    },
    methods: {
        initForm() {
            this.columns.forEach((item) => {
                this.$set(this.formData,item.key,'');
                // this.formData[item.key] = "";
            })
        },
        initParams(){
            this.columns.forEach((item) => {
                this.$set(this.params,item.key,'');
                // this.params[item.key] = "";
            })
        },
        add(){
            console.log(this.formData,123);
            this.addList(this.formData);
            this.addShow = false;
        },
        edit(row) {
            this.formData = { ...row };
            this.editShow = true;
        },
        doEdit(){
            console.log(this.formData,123);
            this.update(this.formData);
            this.editShow = false;
        }
    },
    created() {
        this.initForm();
        this.initParams();
    },
}
</script>
<style lang="less" scoped>
.search-form {
    margin: 20px auto;
}

.toolbar {
    // text-align: right;
    margin-bottom: 10px;
}

.page {
    margin-top: 10px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>